<template>
  <div class="query">
    <div class="query_title">
      {{ queryText }}
      <a-button v-if="type === 'closingRecord'" size="large" style="border-color: #047466; color: ;">汇算记录</a-button>
    </div>
    <a-form class="query_middle" :model="queryState" layout="inline" autocomplete="off" >
      <a-form-item label="调查时间">
        <!-- <a-radio-group v-model:value="queryState.surveyDate">
          <a-radio-button value="today">今天</a-radio-button>
          <a-radio-button value="nearlyAweek">近一周</a-radio-button>
          <a-radio-button value="nearlyAmonth">近一月</a-radio-button>
        </a-radio-group> -->
        <a-range-picker v-model:value="queryState.surveyTime" />
      </a-form-item>
      <!-- <a-form-item label="调查类型" v-if="queryState.surveyType">
        <a-select v-model:value="queryState.surveyType" style="width: 400px" placeholder="请选择调查类型">
          <a-select-option value="系统调查">系统调查</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item label="田块类型">
        <a-select v-model:value="queryState.fieldType" style="width: 400px" placeholder="请选择田块类型">
          <a-select-option value="系统田1">系统田1</a-select-option>
          <a-select-option value="系统田2">系统田2</a-select-option>
          <a-select-option value="系统田3">系统田3</a-select-option>
          <a-select-option value="系统田4">系统田4</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="调查人员">
        <a-select v-model:value="queryState.surveyer" style="width: 400px" placeholder="请选择调查人员">
          <a-select-option value="admin">管理员</a-select-option>
          <a-select-option value="user">用户</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div class="query_end">
      <a-form-item label="调查病虫害">
        <a-checkbox-group @change="checkBoxChange" :options="options" v-model:value="queryState.surveyInsect" />
      </a-form-item>
      <a-space>
        <a-button @click="reset" type="primary" danger>重置</a-button>
        <a-button @click="search" type="primary">查询</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
defineProps(['queryText', 'queryState', 'type', 'options' ])
const emit = defineEmits(['change', 'reset', 'search'])
const checkBoxChange = (e) => {
  emit('change', e)
}
const reset = () => {
  emit('reset')
}
const search = () => {
  emit('search')
}
</script>
<style lang="scss" scoped>
.query {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  .query_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .query_middle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .query_end {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>